<template>
	<view class="plate-num-list">
		<u-popup class="my-popup-md"
			v-model="show" 
			mode="bottom" height="100%"
			:safe-area-inset-bottom="true"
			:mask-close-able="false"
			:custom-style="{'background': '#efefef'}">
			<view class="md-content">
				<!-- <view class="cancel-btn" @click="closeMd">取消</view> -->
				<u-search 
					class="search-inp" 
					v-model="curval"
					shape="square"
					:bg-color="'#fff'"
					:border-color="'#00c3ce'"
					:placeholder="'请输入关键字搜索并选择'"
					:focus="false"
					:height="80"
					:color="'#00c3ce'"
					:maxlength="8"
					:margin="'16rpx'"
					:show-action="true"
					:action-text="'取消'"
					@change="onChange"
					@custom="closeMd"
				></u-search>
				
				<view class="list-content">
					<view 
						class="plate-num-item" 
						v-for="(it, index) in curlist" 
						:key="index"
						:data-obj="it.other" 
						@click="selItem">
						<view class="plate-num" :class="{'c-qgreen': (curval == it.other || it.other == defval)}">{{it.other}}</view>
						<view class="seats">{{it.text}}座</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"plate-num-list",
		props: {
			// 默认值
			defval: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				show: true,
				// 车辆列表
				list: [],
				// 车辆列表
				curlist: [],
				// 当前选择的车牌
				curval: ''
			};
		},
		created(){
			console.log(this.defval);
			this.getTeamAllCarList();
		},
		methods: {
			// 关闭弹框
			closeMd(){
				this.$emit('myClick', {show: false})
			},
			// 获取-车队所有车辆列表
			getTeamAllCarList(){
				const that = this, U = that.U;
				let ps = {
					getCarWay :'1',
					page :{
						pageNum:1,
						pageSize:999,
					}
				}
				that.$u.api.getTeamAllCarList(ps).then(res => {
					if(res.code == 1) {
						that.list = res.data;
						// 拷贝一份
						that.curlist = U.scopy(that.list);
					}
				}).catch(res => { /*U.qclose();*/});
			},
			// 选择列表项
			selItem(e){
				console.log(e);
				const that = this, plateNum = e.currentTarget.dataset.obj;
				
				that.curval = plateNum;
				
				that.$emit('myClick', {show: false, obj: plateNum});
			},
			// 搜索现有数据
			onChange(val){
				const that = this, U = that.U;
				console.log('搜索内容', val);
				
				// 在原始数据中查找
				let reslist = that.list.filter(it => {
					// 匹配车牌号和座位数
					if(it.other.toLowerCase().indexOf(val.toLowerCase()) != -1 || it.text.toLowerCase().indexOf(val.toLowerCase()) != -1) return it;
				});
				
				that.curlist = reslist;
			}
		},
	}
</script>

<style lang="scss">
.plate-num-list{
	
	// 弹框样式
	.md-content{
		position: relative;
		
		// 取消按钮
		.cancel-btn{
			position: fixed;
			top: 14rpx;
			right: 19rpx;
			background: #00c3ce;
			border-top-right-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
			padding: 10rpx 20rpx;
			line-height: 60rpx;
			color: #fff;
			z-index: 99;
		}
	}
	
	.search-inp{
		padding-right: 20rpx;
		position: fixed;
		top: -2rpx;
		width: 100%;
		background: #fff;
		z-index: 9;
	}
	
	.list-content{
		margin-top: 140rpx;
	
		.plate-num-item{
			border-bottom: 2rpx solid #efefef;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 30rpx;
			
			.plate-num{
				font-weight: 600;
				font-size: 30rpx;
				color: #333;
			}
			
			.seats{
				color: #999;
				font-size: 28rpx;
			}
		}
	}
}
</style>
